<template>
  <div style="display: flex; flex-wrap: wrap;">
    <div class="mirror" v-for="(item,index) in mirrors" :key="index">
      <h3 class="mirror-tip">
        <div>{{ item.StationNumber }}</div>
        <div>{{ formattrTime(item.CreatedDate) }}</div>
      </h3>
      <img :src="item.ImagePath" class="mirror-image" @click="showBigImage"/>
      <div class="image-down" @click="downImage(item)">下载</div>
    </div>
  </div>
</template>
<script>
module.exports = {
  name: 'Mirror',
  components: {},
  data () {
    return {
      image: window.imagssss,
      detailImage: null,
      mirrors: []
    }
  },
  methods: {
    downImage (item) {
      downImage(item.ImagePath);
    },
    formattrTime (time) {
      return dateFormatStr(time);
    },
    showBigImage (image) {
      this.detailImage = image;
    },
    init () {
      GetStationFirstImage().then(r => {
        console.log(r);
        this.mirrors = r.Data;
      });
    }
  },
  mounted () {
    window.updateView = this.init();
    this.init();
  }
}
</script>
<style scoped>
.mirror:hover .image-down {
  display: block;
}

.mirror {
  padding: 10px;
  position: relative;
  width: 20%;
  height: 260px;
  overflow: hidden;
  position: relative;

  .image-down {
    position: absolute;
    bottom: 27px;
    right: 30px;
    display: none;
    cursor: pointer;

    background: #409eff;
    color: #fff;
    padding: 10px;
    border-radius: 33px;
    line-height: 27px;
    width: 48px;
    text-align: center;
  }

  .mirror-tip {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba(238, 231, 231, 0.66);
    right: 0;
    display: flex;
    padding: 10px;

    > div:nth-child(1) {
      margin-right: 10px;
    }

  }

  .mirror-image {
    width: 100%;
  //height: 90%;
  }
}
</style>
